<template>
  <el-dialog title="查看存单"
             :visible.sync="dialogForm"
             width="1100px">
    <el-form :inline="true"
             ref="form"
             :model="form"
             class="add-form"
             label-width="80px">
      <el-row>
        <el-col :span="5"
                class="search-width4">
          <el-form-item label="存单号">
            <el-input type="text"
                      placeholder="请输入"
                      v-model="form.search_LIKE_stockBillNo"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="5"
                class="search-width4">
          <el-form-item label="验收单号">
            <el-input type="text"
                      placeholder="请输入"
                      v-model="form.search_LIKE_handoverNo"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="5"
                class="search-width4">
          <el-form-item label="车船号">
            <el-input type="text"
                      placeholder="请输入"
                      v-model="form.search_LIKE_transhipNo"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="3"
                style="width: 100px;">
          <el-button type="primary"
                     icon="el-icon-search"
                     @click="searchhandle"
                     class="ml-80">查 询</el-button>
        </el-col>
      </el-row>
      <h3>存单列表</h3>
      <hr>
      <br />
      <el-row>
        <el-col :span="24">
          <el-table ref="multipleTable"
                  border
                  :data="depositReceiptList"
                  style="width: 100%"
                  highlight-current-row
                  @current-change="handleBillSelectionChange">
            <el-table-column type="expand">
              <template slot-scope="props">
                <el-form label-position="left" inline class="demo-table-expand">
                  <el-col class="table-expand-style">
                    <el-form-item label="管理方式">
                      <span>{{ props.row.manageWay | _filterManagement}}</span>
                    </el-form-item>
                  </el-col>
                  <el-col class="table-expand-style">
                    <el-form-item label="计量方式">
                      <span>{{ props.row.measureWay | _filterMeterStyle}}</span>
                    </el-form-item>
                  </el-col>
                  <el-col class="table-expand-style">
                    <el-form-item label="上账人">
                      <span>{{ props.row.operationPeople}}</span>
                    </el-form-item>
                  </el-col> 
                  <el-col class="table-expand-style">
                    <el-form-item label="上账时间">
                      <span>{{ props.row.operationTime}}</span>
                    </el-form-item>
                  </el-col>
                </el-form>
              </template>
            </el-table-column>
            <!-- <el-table-column width="55">
                <template slot-scope='scope'>
                  <el-radio v-model="scopeRadio" @change.native="handleBillSelectionChange(scope.row)"></el-radio>
                </template>
            </el-table-column> -->
            <el-table-column prop="stockBillNo"
                             label="存单号"
                             width="80">
            </el-table-column>
            <el-table-column prop="handoverNo"
                             label="验收单号"
                             width="80">
            </el-table-column>
            <el-table-column prop="cargoOwnerName"
                             label="货主">
            </el-table-column>
            <el-table-column prop="transhipNo"
                             label="车船号"
                             width="80">
            </el-table-column>
            <el-table-column prop="arriveWeight"
                             label="上账重量"
                             width="80">
            </el-table-column>
            <el-table-column prop="balanceWeight"
                             label="结存重量"
                             width="80">
            </el-table-column>
            <el-table-column prop="cargoName"
                             label="品名"
                             width="100">
            </el-table-column>
            <el-table-column
                             label="规格"
                             width="120">
              <template slot-scope='scope'>
                    {{''+scope.row.normOne +'*'+ scope.row.normTwo +'*'+ scope.row.normThree }}
                </template>
            </el-table-column>
            <el-table-column prop="material"
                             label="材质"
                             width="80">
            </el-table-column>
            <el-table-column prop="madeBy"
                             label="生产厂家"
                             width="120">
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-row>
        <div class="block" v-if="totalPage!=0" style="text-align:right;">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage1"
            :page-size="100"
            layout="total, prev, pager, next"
            :total="totalPage">
          </el-pagination>
        </div>
      </el-row>
      <br/>
      <h3>副账页信息</h3>
      <hr>
      <el-row>
        <el-col :span="24">
          <el-table :data="viceDepositReceiptList"
                    border
                    max-height="300">
            <el-table-column type="expand">
              <template slot-scope="props">
                <el-form label-position="left" inline class="demo-table-expand">
                  <el-col>
                    <el-form-item label="提货单位">
                      <span>{{ props.row.deliveryUnit}}</span>
                    </el-form-item>
                  </el-col>
                  <el-col>
                    <el-form-item label="操作时间">
                      <span>{{ props.row.operationTime}}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="上账人">
                      <span>{{ props.row.operationPeople}}</span>
                    </el-form-item>
                  </el-col> 
                  <el-col :span="6">
                    <el-form-item label="操作人">
                      <span>{{ props.row.operationPeople}}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="记账时间">
                      <span>{{ props.row.accountTime}}</span>
                    </el-form-item>
                  </el-col>     
                  <el-col :span="6">
                    <el-form-item label="记账人">
                      <span>{{ props.row.accountPeople}}</span>
                    </el-form-item>
                  </el-col>      
                  <el-col :span="6">
                    <el-form-item label="调拨人">
                      <span>{{ props.row.planMan}}</span>
                    </el-form-item>
                  </el-col>   
                  <el-col :span="6">
                    <el-form-item label="调拨时间">
                      <span>{{ props.row.planTime}}</span>
                    </el-form-item>
                  </el-col>
                </el-form>
              </template>
            </el-table-column>
            <el-table-column label="序号"
                             width="50">
              <template slot-scope="scope">
                {{ scope.$index+1 }}
              </template>
            </el-table-column>
            <el-table-column label="存单号"
                             prop="stockBillNo"
                             width="80">
            </el-table-column>
            <el-table-column label="验收单号"
                             prop="handoverNo"
                             width="80">
            </el-table-column>
            <el-table-column label="货主"
                             prop="cargoOwnerName"
                             width="204">
            </el-table-column>
            <el-table-column label="车船号"
                             prop="transhipNo"
                             width="80">
            </el-table-column>
            <el-table-column label="上账重量"
                             prop="arriveWeight"
                             width="80">
            </el-table-column>
            <el-table-column label="结存重量"
                             prop="balanceWeight"
                             width="80">
            </el-table-column>
            <el-table-column label="品名"
                             prop="cargoName"
                             width="100">
            </el-table-column>
            <el-table-column label="规格"
                             width="120">
                <template slot-scope='scope'>
                    {{''+scope.row.normOne +'*'+ scope.row.normTwo +'*'+ scope.row.normThree }}
                </template>
            </el-table-column>
            <el-table-column label="材质"
                             prop="material"
                             width="100">
            </el-table-column>
            <el-table-column label="生产厂家"
                             prop="madeBy"
                             width="120">
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-row>
        <div class="block" v-if="viceDepositReceiptList.length>0" style="text-align:right;">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage1"
            :page-size="100"
            layout="total, prev, pager, next"
            :total="viceDepositReceiptList.length">
          </el-pagination>
        </div>
      </el-row>
    </el-form>
    <div slot="footer"
         class="dialog-footer">
      <el-button type="primary"
                 @click="dialogForm=false"
                 :loading="$store.getters.loadingBtn">返 回</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { addThings, updateThings } from '@/api/things/things'
import autoSearchDic from '@/components/autocomplete/autoSearchDic'
import { maxLength, sortLength } from '@/utils/rules'
import { getAccountBill } from '@/api/things/accountPageList'

export default {
  name: 'thingAttributeForm',
  components: { autoSearchDic },
  data() {
    return {
      form: this.clearForm(),
      id: '',
      dialogForm: false,
      isEdit: false,
      maxLot: 0,
      depositReceiptList: [],  //存单数据
      viceDepositReceiptList: [], //流水数据
      cargoOwnerAccount: [],
      scopeRadio: null,
      currentPage1: 1,
      totalPage: 0
    }
  },
  mounted() {
  },
  methods: {
    clearForm() {
      return {
        id: null,
        orgId: '',
        orgId:
          this.$store.state.user.currentUser.org &&
          this.$store.state.user.currentUser.org.id,
        orgName:
          this.$store.state.user.currentUser.org &&
          this.$store.state.user.currentUser.org.cargoName,
        // 新加
        search_LIKE_stockBillNo: '',
        search_LIKE_handoverNo: '',
        search_LIKE_transhipNo: ''
      }
    },
    getAccountBillList(id,params) {
      //获取列表
      if (this.id) {
        getAccountBill(id,params).then(res => {
          this.depositReceiptList = res.data.billVoList
          this.totalPage = res.data.billCount
        })
      }
    },
    searchhandle() {
      let params = {
        // id: this.id,
        search_LIKE_stockBillNo: this.form.search_LIKE_stockBillNo,
        search_LIKE_handoverNo: this.form.search_LIKE_handoverNo,
        search_LIKE_transhipNo: this.form.search_LIKE_transhipNo,
      }
      this.getAccountBillList(this.id,params)
    },
    handleBillSelectionChange(val) {
      if(val.sonBillVoList.length>0) {
        this.viceDepositReceiptList = val.sonBillVoList;
      }
    },
    selectChange(val) {
      // 获取货物name
      if (this.form.cargoTypeCode === val) {
        this.form.cargoTypeName = val
      }
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    // 保存
    handleSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.isEdit ? this.handleToEdit() : this.handleToAdd()
        } else {
          this.$message({
            message: '请检查表单',
            type: 'error'
          })
        }
      })
    },
    // 新增
    handleToAdd() {
      addThings(this.form).then(res => {
        this.$message({ message: '新增成功!', type: 'success' })
        this.dialogForm = false
        this.$emit('load')
      })
    },
    //获取id
    getId(val) {
      this.form.id = val
    },
    // 编辑
    handleToEdit() {
      updateThings(this.form.id, this.form).then(res => {
        this.$message({ message: '编辑成功!', type: 'success' })
        this.dialogForm = false
        this.$emit('load')
      })
    }
  },
  watch: {
    dialogForm(bool) {
      if (!bool) {
        this.$refs.form.resetFields()
        this.isEdit = false
        this.form = this.clearForm()
        this.$emit('clear')
      }
    }
  }
}
</script>

<style>
.gg-input .el-form-item__content .el-input {
  width: 100px !important;
}
</style>
